<template>
  <div class="camera">
    <div class="camera-head">
      <div class="camera-father">
        <div class="youyan">有颜相机</div>
        <div class="camera-head-search">
          <input type="text" placeholder="      搜索" />
          <img :src="cont[37]" alt="" />
        </div>
      </div>
      <div></div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in camera" :key="item.result"
          ><img :src="item.imgurl" alt=""
        /></van-swipe-item>
      </van-swipe>
    </div>
    <div class="camera-content">
      <div class="camera-function color1">
        <img :src="cont[38]" alt="" />
        <p class="function-p">图片精修</p>
      </div>
      <div class="camera-function color2">
        <img :src="cont[39]" alt="" />
        <p class="function-p">大头贴</p>
      </div>
      <div class="camera-function color3">
        <img :src="cont[40]" alt="" />
        <p class="function-p">逗趣拼图</p>
      </div>
      <div class="camera-function color4">
        <img :src="cont[41]" alt="" />
        <p class="function-p">专业ps修图</p>
      </div>
      <div class="camera-function-o color5">
        <img :src="cont[42]" alt="" />
        <p class="function-p">相机</p>
      </div>
    </div>

    <div>
      <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item icon="search">发现</van-tabbar-item>
        <van-tabbar-item icon="setting-o">我</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
  <div class="fanhui" @click="fanhui">
    <van-icon name="arrow-left" />
  </div>
</template>

<script>
import { computed, onMounted, watch } from "@vue/runtime-core";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { ref } from "vue";
export default {
  setup() {
    const active = ref(0);
    const store = useStore();
    const router = useRouter();
    onMounted(() => {
      store.dispatch("geticon");
      store.dispatch("getcamera");
    });
    const fanhui = () => {
      router.go(-1);
    };
    const cont = computed(() => {
      return store.state.iconlist;
    });
    const camera = computed(() => {
      return store.state.cameralist;
    });
    watch(cont, (o, n) => {
      n;
      console.log(cont);
    });
    watch(camera, (o, n) => {
      n;
      console.log(camera);
    });
    return { active, cont, camera, fanhui };
  },
};
</script>
<style lang="less" scoped>
.fanhui {
  position: absolute;
  top: 12px;
  left: 0;
  font-size: 18px;
  color: white;
  display: block;
  width: 20px;
  height: 20px;
  z-index: 5;
}
.camera {
  width: 100%;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  height: 300px;
  > img {
    display: block;
    width: 100%;
    overflow: hidden;
  }
}
.camera-head {
  position: relative;
  .camera-father {
    position: absolute;
    display: flex;
    justify-content: space-between;
    padding-top: 13px;
    > .youyan {
      z-index: 1;
      padding-left: 18px;
      font-size: 15px;
      color: #fff;
    }
    > .camera-head-search {
      z-index: 1;
      padding-left: 95px;
      display: flex;
      position: relative;
      > img {
        position: absolute;
        top: 6px;
        left: 100px;
        width: 9px;
        height: 9px;
      }
      > input {
        background: rgba(0, 0, 0, 0.3);
        border: none;
        border-radius: 10px;
        width: 181px;
        height: 20px;
        &::placeholder {
          color: #fff;
        }
      }
    }
  }
}
.camera-content {
  .color1 {
    background: #fa9dcd;
  }
  .color2 {
    background: #6ef7cf;
  }
  .color3 {
    background: #6ef5f7;
  }
  .color4 {
    background: #f3d279;
  }
  .color5 {
    background: linear-gradient(to bottom right, #fe94f0, #cfaefc);
  }
  margin-top: 60px;
  margin-bottom: 60px;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  .camera-function-o {
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px 3px 3px 0px;
    width: 131px;
    height: 131px;
    border-radius: 50%;
    > img {
      height: 41px;
      width: 43px;
    }
    .function-p {
      font-size: 14px;
      color: #fff;
    }
  }
  .camera-function {
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px 3px 3px 0px;
    width: 170px;
    height: 125px;
    border-radius: 8px;
    > img {
      height: 41px;
      width: 43px;
    }
    .function-p {
      font-size: 14px;
      color: #fff;
    }
  }
}
</style>
